import { getArticleList, getNewArticleList } from '@/store/acitons/home'
import { RootState } from '@/types/store'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArticleItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import styles from './index.module.scss'
// import { useHistory } from 'react-router'
type Props = {
  channelId: number
}
const ArticleList = ({ channelId }: Props) => {
  // 1. 这里不能使用useInitValue封装的方法进行发送请求 因为 需要传递channelId 而封装的 hook 是没有传值的
  // 2. 所以使用useEffect 发送请求
  const dispatch = useDispatch()
  // 跳转到文章详情
  // const history = useHistory()
  useEffect(() => {
    dispatch(getArticleList(channelId, Date.now()))
  }, [dispatch, channelId])

  // 3. 获取数据
  const channelArticles = useSelector(
    (state: RootState) => state.home.channelArticles
  )
  // 4. 这里注意一开始 发请求可能没有数据 所以给一个 {} 对象防止报错  所以解构的时候 articles = [] 一开始没值
  const { articles = [], timestamp } = channelArticles[channelId] || {}

  // 5.处理数据滚动  当时间 为null 即没有数据
  const hasMore = timestamp !== null
  const loadMore = async () => {
    // 这个函数一开始就会执行 且返回promise
    // 6. 这里要传递上一次的时间戳 刚开始没有就用最新的date.now() 后来下拉 有时间戳 就用时间戳
    await dispatch(getArticleList(channelId, timestamp || Date.now()))
  }

  // 7.处理下拉刷新
  const onRefresh = async () => {
    // console.log('最新数据')
    await dispatch(getNewArticleList(channelId, Date.now()))
  }
  return (
    <div className={styles.root}>
      <PullToRefresh onRefresh={onRefresh}>
        {/* 文章列表中的每一项 */}
        {articles.map((item) => (
          <div
            className="article-item"
            key={item.art_id}
          >
            <ArticleItem article={item} />
          </div>
        ))}
        {/* 无限滚动 */}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}></InfiniteScroll>
      </PullToRefresh>
    </div>
  )
}

export default ArticleList
